import { Button, Form, Input, message } from "antd";
import "./register.scss";
import { useForm } from "antd/es/form/Form";
import {
	loginServer,
	registerCaptchaServer,
	registerServer,
} from "@/servers/userServer";
import { useNavigate } from "react-router-dom";

export interface RegisterUser {
	username: string;
	nickName: string;
	password: string;
	confirmPassword: string;
	email: string;
	captcha: string;
}

const layout1 = {
	labelCol: { span: 6 },
	wrapperCol: { span: 18 },
};

const layout2 = {
	labelCol: { span: 0 },
	wrapperCol: { span: 24 },
};

export default function Register() {
	const [form] = useForm();
	const navigate = useNavigate();
	async function sendCaptcha() {
		const email = form.getFieldValue("email");
		if (!email) {
			message.error("请填写邮箱地址");
			return;
		}
		const res = await registerCaptchaServer(email);
		console.log(res);
	}

	const onFinish = async (values: RegisterUser) => {
		const res = await registerServer(values);
		if (res.data.code === 201) {
            message.success("注册成功");
            setTimeout(() => {
                navigate("/login");
            }, 200);
		}
	};

	return (
		<div id="register-container">
			<h1>聊天室系统</h1>
			<Form
				form={form}
				{...layout1}
				onFinish={onFinish}
				colon={false}
				autoComplete="off"
			>
				<Form.Item
					label="用户名"
					name="username"
					rules={[{ required: true, message: "请输入用户名!" }]}
				>
					<Input />
				</Form.Item>

				<Form.Item
					label="昵称"
					name="nickName"
					rules={[{ required: true, message: "请输入昵称!" }]}
				>
					<Input />
				</Form.Item>

				<Form.Item
					label="密码"
					name="password"
					rules={[{ required: true, message: "请输入密码!" }]}
				>
					<Input.Password />
				</Form.Item>

				<Form.Item
					label="确认密码"
					name="confirmPassword"
					rules={[{ required: true, message: "请输入确认密码!" }]}
				>
					<Input.Password />
				</Form.Item>

				<Form.Item
					label="邮箱"
					name="email"
					rules={[
						{ required: true, message: "请输入邮箱!" },
						{ type: "email", message: "请输入合法邮箱地址!" },
					]}
				>
					<Input />
				</Form.Item>

				<div className="captcha-wrapper">
					<Form.Item
						label="验证码"
						name="captcha"
						rules={[{ required: true, message: "请输入验证码!" }]}
					>
						<Input />
					</Form.Item>
					<Button type="primary" onClick={sendCaptcha}>
						发送验证码
					</Button>
				</div>

				<Form.Item {...layout2}>
					<div className="links">
						已有账号？去<a href="">登录</a>
					</div>
				</Form.Item>

				<Form.Item {...layout1} label=" ">
					<Button className="btn" type="primary" htmlType="submit">
						注册
					</Button>
				</Form.Item>
			</Form>
		</div>
	);
}
